<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<!-- 上传插件 -->
<link rel="stylesheet"
	href="/ajax/plugins/bootstrap-fileinput/css/fileinput.css"
	th:href="@{/ajax/plugins/bootstrap-fileinput/css/fileinput.css}" />
<link href="/css/font-awesome.css" th:href="@{/css/font-awesome.css}"
	rel="stylesheet" />
<link href="/ajax/libs/iCheck/custom.css"
	th:href="@{/ajax/libs/iCheck/custom.css}" rel="stylesheet" />
<body class="gray-bg">
	<div class="wrapper wrapper-content">
		<div class="row">
			<div class="ibox float-e-margins">
				<div class="ibox-content">
					<form class="form-horizontal m-t" id="form-toolrun-run">
						<input id="toolBackId" name="toolBackId" th:value="${toolBackId}"
							type="hidden" />
						<div class="form-group">
							<label class="col-sm-1 control-label">输入内容：</label>
							<div class="col-sm-11">
								<textarea id="content" name="content" rows="5"
									class="form-control"></textarea>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-1 control-label">插入logo：</label>
							<div class="col-sm-1">
								<div class="onoffswitch">
									<input type="checkbox" th:checked="false"
										class="onoffswitch-checkbox" id="status" name="status">
									<label class="onoffswitch-label" for="status"> <span
										class="onoffswitch-inner"></span> <span
										class="onoffswitch-switch"></span>
									</label>
								</div>
							</div>
							<div class="col-sm-4" id="show1" style="visibility: hidden">
								<label class="checkbox-inline i-checks" id="clickLabel1">
									<input type="radio" value="0" id="radio1" th:checked="true" />
									在线图片
								</label> <label class="checkbox-inline i-checks" id="clickLabel2">
									<input type="radio" value="1" id="radio2" /> 图片上传
								</label>
							</div>
							<label class="col-sm-2 control-label">二维码大小：</label>
							<div class="col-sm-4">
								<select class="form-control" name="orCodeSize" id="orCodeSize">
									<option value="300">300 X 300</option>
									<option value="500">500 X 500</option>
									<option value="1000">1000 X 1000</option>
									<option value="1500">1500 X 1500</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-1 control-label"></label>
							<div class="col-sm-5" id="pic2" style="visibility: hidden">
								<input id="pic" name="pic" class="form-control" type="text"
									placeholder="可直接填写图片链接">
							</div>
							<label class="col-sm-2 control-label">二维码格式：</label>
							<div class="col-sm-4">
								<select class="form-control" name="orCodeImgFormat"
									id="orCodeImgFormat">
									<option value="png">png</option>
									<option value="jpg">jpg</option>
									<option value="jpeg">jpeg</option>
									<option value="gif">gif</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-1 control-label"></label>
							<div class="col-sm-5" style="display: none" id="show3">
								<input id="file-5" class="file" type="file" name="file">
							</div>
							<div class="col-sm-5" style="display: none" id="show4"
								align="center">
								<img id="showImg" width="285" height="285"></img>
							</div>
						</div>
						<input id="orCodeFileName" name="orCodeFileName" type="hidden" />
						<div class="form-group">
							<div class="form-control-static col-sm-offset-10">
								<button class="btn btn-primary" type="submit"
									id="runORCodeCreate">生成</button>
								<!-- 注意id不能和方法名一样 -->
								<button class="btn btn-primary" onclick="imgORCodeSave();"
									id="imgSave" type="button" disabled>保存</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div th:include="include::footer"></div>
	<script src="/ajax/libs/iCheck/icheck.min.js"
		th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
	<script>
		$(document).ready(function() {
			$(".i-checks").iCheck({
				checkboxClass : "icheckbox_square-green",
				radioClass : "iradio_square-green",
			})
		});
	</script>
	<script src="/rzspider/commontool/toolrun/30001.js"
		th:src="@{/rzspider/commontool/toolrun/30001.js}">
		
	</script>
	<script src="/ajax/plugins/bootstrap-fileinput/js/fileinput.min.js"
		th:src="@{/ajax/plugins/bootstrap-fileinput/js/fileinput.min.js}"></script>
	<script src="/ajax/plugins/bootstrap-fileinput/js/locales/zh.js"
		th:src="@{/ajax/plugins/bootstrap-fileinput/js/locales/zh.js  }"></script>
	<script src="/ajax/plugins/bootstrap-fileinput/js/locales/fr.js"
		th:src="@{/ajax/plugins/bootstrap-fileinput/js/locales/fr.js  }"></script>
	<script>
		var imgFileName;
		// 上传文件
		$("#file-5")
				.fileinput({
					language : 'zh', // 设置语言
					uploadUrl : ctx + "commontool/toolrun/uploadToolFile/0",
					allowedFileExtensions : [ 'jpg', 'png', 'jpeg', 'gif' ],// 接收的文件后缀
					showUpload : true, // 是否显示上传按钮
					showCaption : false,// 是否显示标题
					browseClass : "btn btn-primary", // 按钮样式
					dropZoneEnabled : true,//是否显示拖拽区域
					uploadAsync : true,
					showBrowse : true,
					browseOnZoneClick : false,
					maxFileCount : 1, // 表示允许同时上传的最大文件个数
					enctype : 'multipart/form-data',
					maxFileSize : 3000
				// 单位为kb，如果为0表示不限制文件大小
				})
				.on(
						"fileuploaded",
						function(event, data) {
							//返回文件名
							imgFileName = (data.response.code == 0) ? (data.response.msg)
									: "";
							//直接将值填入文本框
							$('#pic').val(
									(imgFileName == "") ? ""
											: ('/cachefiles/' + imgFileName));
							selectImgOnline();
						});
	</script>
</body>
</html>
